<script lang="ts" setup>
import { onServerPrefetch, useSSRContext } from 'vue';

onServerPrefetch(async () => {
  const ctx = useSSRContext() as Record<string, any>;
  ctx.httpStatusCode = 404;
});
</script>

<template>
  <main class="grid min-h-full place-items-center bg-white px-24 py-96 lg:px-8 sm:py-128">
    <div class="text-center">
      <p class="text-40 font-semibold">404</p>
      <h1 class="mt-4 text-40 text-gray-900 font-bold tracking-tight sm:text-40">{{ $t('mobile.404.notFound') }}</h1>
      <div class="mt-10 flex items-center justify-center gap-x-6">
        <RouterLink to="/" class="rounded-4px px-3.5 py-2.5 text-48 text-white decoration-none">{{ $t('mobile.404.goBack') }}</RouterLink>
      </div>
    </div>
  </main>
</template>
